<template>
  <div class="cate-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div>
        <el-alert style="margin-bottom: 15px;" title="消息提示的文案" type="info" center show-icon></el-alert>
        <!-- 步骤条 -->
        <el-steps :active="Number(activName)" align-center style="margin-bottom: 20px;">
          <el-step title="基本信息"></el-step>
          <el-step title="商品参数"></el-step>
          <el-step title="商品属性"></el-step>
          <el-step title="商品图片"></el-step>
          <el-step title="商品内容"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <template>
          <el-tabs
            v-model="activName"
            :tab-position="tabPosition"
            :before-leave="beforeLeave"
            style="height: 100%;margin-top:10px"
          >
            <el-tab-pane name="0" label="基本信息">
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="80px"
                class="demo-ruleForm"
                label-position="top"
              >
                <el-form-item label="商品名称" prop="goods_name">
                  <el-input v-model="ruleForm.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                  <el-input v-model="ruleForm.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                  <el-input v-model="ruleForm.goods_weight"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                  <el-input v-model="ruleForm.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="商品分类" prop="goods_cat">
                  <el-cascader
                    v-model="ruleForm.goods_cat"
                    :options="cateCasList"
                    :props="props"
                    @change="handleChange"
                  ></el-cascader>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane name="1" label="商品参数">
              <el-tag
                style="margin:5px;"
                v-for="(item, index) in manyList"
                :key="index"
              >{{item.attr_name}}</el-tag>
            </el-tab-pane>
            <el-tab-pane name="2" label="商品属性">
              <el-form label-position="top" label-width="80px" :model="ruleForm" :rules="rules">
                <el-form-item
                  v-for="(item, index) in onlyList"
                  :key="index"
                  :label="item.attr_name"
                >
                  <el-input v-model=" ruleForm.goods_name"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane name="3" label="商品图片">
              <el-upload
                class="upload-demo"
                :headers="headersObj"
                action="http://klxin.cn:8888/api/private/v1/upload"
                :on-success="fileSuccess"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-tab-pane>
            <el-tab-pane name="4" label="商品内容">
              <quillEditor v-model="ruleForm.goods_introduce" style="height:350px"></quillEditor>
              <el-button type="primary" @click="addGoods">添加商品</el-button>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </el-card>
  </div>
</template>
           
<script>
import _ from "lodash";
import { quillEditor } from "vue-quill-editor"; // 调用富文本编辑器
import "quill/dist/quill.snow.css"; // 富文本编辑器外部引用样式  三种样式三选一引入即可
import "quill/dist/quill.core.css";
import "quill/dist/quill.bubble.css";
import * as Quill from "quill"; // 富文本基于quill

import {
  cateParamsList_api,
  cateList_api,
  goodrsAdd_api,
} from "../../api/index.js";
export default {
  data() {
    return {
      tabPosition: "left",
      activName: "0",
      ruleForm: {
        goods_name: "",
        goods_cat: [],
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        goods_introduce: "",
        pics: [],
        attrs: [],
      },
      // 级联选择器
      cateCasList: [],
      value: [],
      props: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      // 商品参数
      manyList: [],
      onlyList: [],
      // 上传图片
      fileList: [],
      headersObj: {
        Authorization: window.sessionStorage.getItem("token"),
      },
      // 校验规则
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名", trigger: "blur" },
        ],
        goods_price: [
          { required: true, message: "请输入价格", trigger: "blur" },
        ],
        goods_number: [
          { required: true, message: "请输入数量", trigger: "blur" },
        ],
        goods_weight: [
          { required: true, message: "请输入重量", trigger: "blur" },
        ],
        goods_cat: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getParamsCate();
  },
  methods: {
    // 渲染级联选择器
    async getParamsCate() {
      const { data: res } = await cateList_api({ type: 3 });
      this.cateCasList = res.data;
    },
    handleChange() {
      if (this.ruleForm.goods_cat.length == 3) {
        this.value = this.ruleForm.goods_cat;
      } else {
        this.value = [];
      }
    },
    // 阻止tab跳转
    async beforeLeave(activName) {
      if (activName !== 0) {
        if (this.ruleForm.goods_cat.length !== 3) {
          this.$message.error("错了哦，请选择分类数据");
          return reject;
        }

        if (activName == 1) {
          const { data: res } = await cateParamsList_api({
            id: this.catId,
            sel: "many",
          });
          this.manyList = res.data;
        }

        if (activName == 2) {
          const { data: res } = await cateParamsList_api({
            id: this.catId,
            sel: "only",
          });
          this.onlyList = res.data;
        }
        if (activName == 3) {
        }
      }
    },
    // 上传
    // 点击触发事件
    fileSuccess(response) {
      this.ruleForm.pics.push({ pic: response.data.tmp_path });
    },
    handleRemove(file) {
      this.ruleForm.pics = this.ruleForm.pics.filter(
        (item) => item.pic != file.response.data.tmp_path
      );
    },
    // 添加商品事件
    addGoods() {
      var formD = _.cloneDeep(this.ruleForm);
      formD.goods_cat = formD.goods_cat.join(",");
      this.$refs.ruleForm.validate(async (valide) => {
        if (valide) {
          const { data: res } = await goodrsAdd_api(formD);
        } else if (res.meta.status !== 201) {
          this.$message.error(res.meta.msg);
        } else {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.activName = 6
        }
      });
    },
  },
  computed: {
    catId() {
      if (this.ruleForm.goods_cat.length == 3) {
        return this.ruleForm.goods_cat[2];
      } else {
        return 2050;
      }
    },
  },
  components: {
    quillEditor,
  },
};
</script>
<style scoped lang='less'>
.cate-container {
  .el-breadcrumb {
    margin-bottom: 20px;
  }
  .el-form-item {
    margin-bottom: 22px;
  }
  //  deep 穿透  穿刺
  /deep/.ql-container {
    height: 250px;
  }
}
</style>